<template>
  <div class="header">
    <div class="header-left">
      <!-- 返回 -->
      <div class="iconfont back-icon">&#xe624;</div>
     </div>
    <div class="header-input">
      <span class="iconfont">&#xe632;</span>
      输入城市/景点/游玩主题
    </div>
    <router-link to="/city">
      <div class="header-right">
        {{this.city}}<span class="iconfont arrow-icon">&#xe61a;</span>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name:'HomeHeader',
  props:{
    city : String
  }
}
</script>

<style lang="stylus" scoped>
  // @import '../../../assets/styles/variables.styl'
  //  可以简写 ~@代表src目录
  // @import '~@/assets/styles/variables.styl'
  //  注意还可以去build下的webpack.base.conf.js里的resolve 中的alias 自定义自己的相对路径标志
  @import '~styles/variables.styl'

  //  以后每开发一个新功能 都要创建一个git branch（web打开）在该分支上进行开发;然后将线上分支拉到本地
  //  git pull;  git checkout index-swiper 接着借助第三方插件vue-awesome-swiper实现轮播图 npm install  vue-awesome-swiper@2.6.7 --save

  /* scoped  使得.header仅对当前的组件有效 不会对其他组件产生任何影响*/
   // 移动端一般用rem像素 1rem = html font-size = 50px; 若设计原图为二倍图(86px)  则实际为43px  像素
   // 关于CSS中line-height 和 height的区别：line-height是行高的意思，height则是定义元素自身的高度。
   //
   // 简单来说，line-height是行高的意思，height则是定义元素自身的高度。
   // 例如下面这段代码
   // <div class="test">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
   // 如果我们定义.test {line-height:20px;}，那么这个元素的实际高度将取决于其中内容的多少，假如文字部分在浏览器里面显示为一行，
   // 那么这个div的实际高度就是20px，
   // 如果文字显示为两行，那么div的实际高度就是40px，而且文字的行高是20px的；
   // 如果我们定义.test{height:40px}，那么这个元素的实际高度一般并不会因为内容的多少而发生改变，如果文字显示为一行，那么这个div的高度仍然是40px，
   // 如果显示为2行，但是文字的行高不够20px，这个div的高度也不会因为文字内容的高度小于height而发生改变。不过如果文字内容的高度大于40px了，
   // 一般来说这个div的高度还是会相应增加的。

   // 去iconfont 选择合适的图标加入购物车并下载  选择.eot svg ttf woff到新建的iconfont文件夹  并把iconfont.css放到./
   // 到iconfont.css改路径
   // 再打开main.js引入iconfont
   // 回到Header.vue 到iconfont官网找到对应图标 点击复制代码  将span标签覆盖原文字 class="iconfont" 将复制的代码嵌入span标签
  .header
    display:flex
    line-height: $headerHeight
    background:$bgColor  //像这个颜色 会应用到全局 可以单独设置成一个变量，放在variables.styl(stylus) 这样今后改变颜色风格的时候 改变这个变量即可
    color:#fff
    .header-left
      width:.64rem
      float:left
      .back-icon
        text-align center//规定文本水平对齐方式 居中
        font-size .4rem
    .header-input
      flex:1
      background:#FFFFFF
      border-radius:.1rem//5像素
      margin-top: .12rem
      margin-left .2rem
      margin-bottom .12rem
      // height:.64rem
      line-height:.64rem
      color #CCCCCC
      padding-left .2rem//重要 https://www.jianshu.com/p/5d0d74511717 https://www.jianshu.com/p/e8e9169f6b73 https://www.jianshu.com/p/b7d94ec60136
      //浅拷贝 深拷贝 https://www.jianshu.com/p/a447d7325736
      //Vue文字探照灯效果 https://www.jianshu.com/p/c7c427a48858
    .header-right
      width:1.24rem
      float:right
      text-align:center
      // 添加router-link后字体颜色不对，故
      color: #fff
      .arrow-icon
        font-size .24rem
        padding-left .01rem
</style>
